<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>启动服务</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 50px;
      background-color: #f5f5f5;
    }
    .container {
      max-width: 500px;
      margin: 0 auto;
      background: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .status {
      margin: 20px 0;
      padding: 15px;
      border-radius: 5px;
      font-weight: bold;
    }
    .success { background-color: #d4edda; color: #155724; }
    .error { background-color: #f8d7da; color: #721c24; }
    .info { background-color: #d1ecf1; color: #0c5460; }
    button {
      padding: 10px 20px;
      margin: 10px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }
    .primary { background-color: #007bff; color: white; }
    .secondary { background-color: #6c757d; color: white; }
    .primary:hover { background-color: #0056b3; }
    .secondary:hover { background-color: #545b62; }
  </style>
</head>
<body>
  <div class="container">
    <h1>🚀 Chrome 笔记插件服务启动器</h1>
    
    <div id="status" class="status info">
      正在检测服务状态...
    </div>
    
    <div id="buttons">
      <button class="primary" onclick="startServer()">启动服务</button>
      <button class="secondary" onclick="checkStatus()">检测状态</button>
      <button class="secondary" onclick="openExtension()">打开插件管理</button>
    </div>
    
    <div id="log" style="margin-top: 20px; text-align: left; font-family: monospace; font-size: 12px; background: #f8f9fa; padding: 10px; border-radius: 5px; max-height: 200px; overflow-y: auto;">
    </div>
  </div>

  <script>
    let logElement;
    
    function log(message) {
      if (!logElement) logElement = document.getElementById('log');
      const time = new Date().toLocaleTimeString();
      logElement.innerHTML += `[${time}] ${message}\n`;
      logElement.scrollTop = logElement.scrollHeight;
    }
    
    async function checkStatus() {
      const statusElement = document.getElementById('status');
      statusElement.className = 'status info';
      statusElement.textContent = '正在检测服务状态...';
      
      log('开始检测服务状态');
      
      try {
        const response = await fetch('http://127.0.0.1:3000/api/notes', {
          method: 'GET',
          timeout: 3000
        });
        
        if (response.ok) {
          statusElement.className = 'status success';
          statusElement.textContent = '✅ 服务正在运行';
          log('服务状态：在线');
        } else {
          throw new Error(`HTTP ${response.status}`);
        }
      } catch (error) {
        statusElement.className = 'status error';
        statusElement.textContent = '❌ 服务未启动';
        log(`服务状态：离线 (${error.message})`);
      }
    }
    
    async function startServer() {
      const statusElement = document.getElementById('status');
      statusElement.className = 'status info';
      statusElement.textContent = '正在启动服务...';
      
      log('开始启动服务');
      
      try {
        // 尝试通过 URL 协议启动服务
        const startUrl = 'file://' + window.location.pathname.replace('start-server.html', 'start.bat');
        log(`尝试启动: ${startUrl}`);
        
        // 创建一个隐藏的 iframe 来触发启动
        const iframe = document.createElement('iframe');
        iframe.style.display = 'none';
        iframe.src = startUrl;
        document.body.appendChild(iframe);
        
        // 等待一段时间
        await new Promise(resolve => setTimeout(resolve, 3000));
        
        // 移除 iframe
        document.body.removeChild(iframe);
        
        log('启动命令已发送，等待服务启动...');
        
        // 等待服务启动
        for (let i = 0; i < 10; i++) {
          await new Promise(resolve => setTimeout(resolve, 1000));
          log(`等待服务启动... (${i + 1}/10)`);
          
          try {
            const response = await fetch('http://127.0.0.1:3000/api/notes', {
              method: 'GET',
              timeout: 2000
            });
            
            if (response.ok) {
              statusElement.className = 'status success';
              statusElement.textContent = '✅ 服务启动成功！';
              log('服务启动成功');
              return;
            }
          } catch (error) {
            // 继续等待
          }
        }
        
        throw new Error('服务启动超时');
        
      } catch (error) {
        statusElement.className = 'status error';
        statusElement.textContent = '❌ 自动启动失败';
        log(`启动失败: ${error.message}`);
        
        // 显示手动启动指导
        alert('自动启动失败，请手动启动服务：\n\n1. 双击桌面上的"启动Chrome笔记插件.bat"\n2. 或者运行: npm run starter\n3. 或者运行: npm run desktop');
      }
    }
    
    function openExtension() {
      log('打开插件管理页面');
      window.open('chrome://extensions/', '_blank');
    }
    
    // 页面加载时自动检测状态
    window.addEventListener('load', checkStatus);
  </script>
</body>
</html> 